
<template>
<h1>个人简历</h1>
  <button @click="loadData">点击加载数据</button>
  <table border="1" >
    <tr>
      <td>照片</td>
      <td>
        <img :src="person.imgUrl" width="200px">
      </td>
    </tr>
    <tr>
      <td>姓名</td>
      <td>{{person.name}}</td>
    </tr>
    <tr>
      <td>年龄</td>
      <td>{{person.age}}</td>
    </tr>
    <tr>
      <td>好友</td>
      <td>
        <ul v-for="(item) in person.friends" :key="index">
          <li>{{item}}</li>
        </ul>
      </td>
    </tr>
  </table>

</template>

<script setup>
import {ref} from "vue";

const person = ref({
  name:'',
  age:'',
  imgUrl:'',
  friends:[]
});
const loadData = () => {
  person.value = {
    name:'范传奇',
    age:18,
    imgUrl: 'fcq.jpg',
    friends:['小明','小红','小刚']
  }
}
</script>

<style scoped>

</style>